<template>
  <div :class="styles['login']">
    <div :class="[styles['logo'], styles['w460']]">
      <img :src="isDark ? LogoDark : Logo" alt="">
      <p>卡乐仓管后台<span>({{ state.name }})</span></p>
    </div>
    <component :is="state.com" @change="changeCom" :class="styles['w460']"></component>
  </div>
</template>

<script setup name="LoginPage">
import {computed, ref} from 'vue'
import Login from './components/Login'
import Register from './components/Register'
import Logo from '@/assets/images/logo.png'
import LogoDark from '@/assets/images/logo-dark.png'
import { useDark } from '@/hooks'

const [isDark] = useDark()

// 组件列表
const componentMap = {
  login: {
    name: '登录',
    com: Login
  },
  register: {
    name: '注册',
    com: Register
  }
}

// 当前prop
const currentProp = ref('login')

// 当前组件对象
const state = computed(() => componentMap[currentProp.value])

// 登录注册切换
const changeCom = (prop) => {
  currentProp.value = prop
}
</script>

<style lang="less" src="./index.less" module="styles"></style>
